<script setup lang="ts"></script>

<template>
  <view class="homeLayout">
    <view class="head">
      <home-head></home-head>
    </view>
    <view class="body">
      <view class="swiperOut">
        <swiper vertical indicator-dots autoplay circular>
          <swiper-item v-for="(item, index) in 5">{{ index + 1 }}</swiper-item>
        </swiper>
      </view>
      <view class="progress">
        <view class="line"></view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.homeLayout {
  height: 100vh;
  background-color: #bde1fb;
  display: flex;
  flex-direction: column;
  .head {
  }
  .body {
    flex: 1;
    background-color: #fff;
    border-radius: 50rpx 50rpx 0 0;
    .swiperOut {
      height: calc(100% - 8rpx);
      swiper {
        height: 100%;
        &-item:nth-child(2n-1) {
          background-color: green;
        }
      }
    }
    .progress {
      height: 8rpx;
      background-color: #eee;
      .line {
        height: 100%;
        width: 50%;
        background: linear-gradient(to right, #bce0fd, #74dbef);
      }
    }
  }
}
</style>
